<template>
  <div class="girls">
    <h1>Meizi</h1>
    <img style="width: 300px" :src="girl.url" alt="">
    <div class="desc">{{girl.desc}}</div>
    <loading v-if="isLoading"/>
  </div>
</template>

<script>
import axios from 'axios'
import Loading from "@/components/Loading";

export default {
  name: "Meizi",
  components: {Loading},
  data() {
    return {
      girl: {},
      isLoading: false
    }
  },
  created() {
    const { id } = this.$route.params
    this.isLoading = true
    axios({
      url: `https://gank.io/api/v2/post/${id}`
    }).then(({data}) => {
      console.log(data.data)
      this.girl = data.data
    }).finally(() => {
      this.isLoading = false
    })
    // console.log(this)
    // console.log(this.$router)
    // console.log(this.$route.params.id)
  }
}
</script>
